<template>
  <div>
    <el-dialog
      v-model="assetDetailInfo.openObj.visible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">{{ assetDetailInfo.openObj.openTitle }}</div>
        </div>
      </template>

      <div>
        <el-form
          :model="assetDetailInfo.form"
          ref="operateFormInfoRef"
          label-width="120px"
        >
          <h3>{{ t("assetsList.basicInfo") }}</h3>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.assetCode')" prop="assetsCode">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.assetsCode"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.assetName')" prop="assetsName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.assetsName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.assetType')" prop="assetsClassifyName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.assetsClassifyName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                :label="t('assetsList.organization')"
                prop="ownershipOrganizationalId"
              >
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.ownershipOrganizationalName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                :label="t('assetsList.usageOrganization')"
                prop="useOrganizationName"
              >
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.useOrganizationName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.useUser')" prop="useUserName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.useUserName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.keeper')" prop="storekeeperUserName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.storekeeperUserName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.area')" prop="regionName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.regionName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.source')" prop="assetsSourceName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.assetsSourceName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <h3>{{ t("assetsList.otherInfo") }}</h3>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.location')" prop="storageLocation">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.storageLocation"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.model')" prop="specModel">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.specModel"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.unit')" prop="unit">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.unit"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.value')" prop="assetsCost">
                <el-input
                  disabled
                  type="text"
                  v-model="assetDetailInfo.form.assetsCost"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.usagePeriod')" prop="serviceLife">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.serviceLife"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.purchaseDate')" prop="purchaseDate">
                <el-date-picker
                  disabled
                  v-model="assetDetailInfo.form.purchaseDate"
                  type="date"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.supplier')" prop="supplierName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.supplierName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="t('assetsList.manufacturer')" prop="manufacturerName">
                <el-input
                  disabled
                  v-model="assetDetailInfo.form.manufacturerName"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="t('assetsList.remark')" prop="remark">
                <el-input
                  disabled
                  type="textarea"
                  v-model="assetDetailInfo.form.remark"
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeDetail">{{ t("common.close") }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ashDetailDialog">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { proxy } = getCurrentInstance();

const props = defineProps({
  assetDetailInfo: {
    type: Object,
  },
});

const closeDetail = () => {
  proxy.assetDetailInfo.openObj = {
    visible: false,
    openTitle: "",
  };
  proxy.assetDetailInfo.form = {};
};
</script>
<style lang="scss" scoped>
h3 {
  font-weight: bolder;
  color: #000;
}
.dialog_title {
  display: flex;
  font-weight: 700;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: auto;
    border-radius: 3px;
    margin-right: 10px;
  }
  .title {
    color: #000;
  }
}
.el-dialog {
  background: red;
}
:deep(.el-dialog__body) {
  padding: 0 20px;
}

.table_container {
  padding: 0;
}
.dialog_toolbar {
  > :deep(div:first-child) {
    > div {
      position: absolute;
    }
  }
}
</style>
